import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { PageHeader } from '@/components/ui/page-header';
import { Stat } from '@/components/ui/primitives';
import { AssetBrowser } from '@/components/market/asset-browser';
import { Suspense } from 'react';
import { Skeleton } from '@/components/ui/primitives';
import { getSet, getSetStats } from '@/lib/queries/markets';
import { catName, categoryCrumbs } from '@/lib/taxonomy';
import { fmtMoney, fmtNum, fmtRelative } from '@/lib/format';
import type { SP } from '@/lib/search-params';

export const revalidate = 300;

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const { slug } = await params;
  const s = await getSet(slug);
  if (!s) return { title: 'Set not found' };
  return { title: `${s.name} · ${catName(s.categorySlug)} set`, description: `${s.name}${s.releaseYear ? ` (${s.releaseYear})` : ''}: every tracked asset with valuation, sales and listings.` };
}

export default async function SetPage({ params, searchParams }: { params: Promise<{ slug: string }>; searchParams: Promise<SP> }) {
  const { slug } = await params;
  const sp = await searchParams;
  const set = await getSet(slug);
  if (!set) notFound();
  const stats = await getSetStats(slug);
  return (
    <div>
      <PageHeader
        crumbs={[{ label: 'Markets', href: '/markets' }, ...categoryCrumbs(set.categorySlug), { label: set.name }]}
        title={set.name}
        description={`${catName(set.categorySlug)} set${set.code ? ` · code ${set.code}` : ''}${set.releaseDate ? ` · released ${set.releaseDate}` : set.releaseYear ? ` · ${set.releaseYear}` : ''}${set.totalItems ? ` · ${set.totalItems} items in the official set` : ''}${set.language ? ` · ${set.language.toUpperCase()}` : ''}.`}
      />
      <section className="grid grid-cols-2 gap-px overflow-hidden rounded-md border border-border bg-border sm:grid-cols-4 lg:grid-cols-7">
        {[
          ['Tracked assets', fmtNum(stats.assets)],
          ['With valuation', fmtNum(stats.priced)],
          ['Sales', fmtNum(stats.sales)],
          ['Active listings', fmtNum(stats.listings)],
          ['Median RIV', stats.medianRivUsd != null ? fmtMoney(stats.medianRivUsd) : '—'],
          ['Top RIV', stats.maxRivUsd != null ? fmtMoney(stats.maxRivUsd) : '—'],
          ['Last sale', stats.lastSaleAt ? fmtRelative(stats.lastSaleAt) : '—'],
        ].map(([k, v]) => (
          <div key={k} className="bg-elevated px-3 py-2.5">
            <Stat label={k} value={v} />
          </div>
        ))}
      </section>
      {stats.sumRivUsd != null && stats.priced === stats.assets && stats.assets > 0 ? <p className="mt-1 text-[11px] text-subtle">Sum of RIV across all {stats.assets} priced assets: {fmtMoney(stats.sumRivUsd)} (a complete-set value indication, not a market cap).</p> : null}
      <div className="mt-4">
        <Suspense fallback={<Skeleton className="h-96" />}>
          <AssetBrowser scope={{ set: slug }} sp={{ ...sp, sort: sp.sort ?? 'number' }} basePath={`/set/${slug}`} title={`Assets in ${set.name}`} pageSize={60} />
        </Suspense>
      </div>
    </div>
  );
}